<template>
  <div>
    <p v-show="isArr" v-for="(item, index) in strValueArr" :key="index">{{item}}</p>
    <p v-show="!isArr" v-if='isReadOnlyPage === true'>{{this.strValue}}</p>
    <a-select v-else allowClear :getPopupContainer="node => node.parentNode" @change="handleChange" :value="value1" :disabled="isDisabled">
      <a-select-option v-for="(item, index) in options" :key="index" :value="item.id + ''">{{item.name}}</a-select-option>
    </a-select>
  </div>
</template>

<script>
import axios from '@/plugins/axios'
export default {
  name: 'SelectUrl',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'url', 'isReadOnlyPage', 'strValue', 'isDisabled'],
  data () {
    return {
      options: [],
      defaultVal: 0,
      strValueArr: [],
      isArr: false
    }
  },
  computed: {
    value1 () {
      if (!this.value) {
        return ''
      }
      return '' + this.value.id
    }
  },
  mounted () {
    if (this.url) {
      axios.get(this.url).then(response => {
        let res = response.data
        this.options = res.data
      })
    }
    if (Array.isArray(this.strValue)) {
      this.isArr = true
      this.strValueArr = this.strValue
    }
  },
  methods: {
    handleChange (value) {
      this.$emit('change', { id: value }, this.title)
    }
  }
}
</script>

<style>

</style>
